<template>
	<view class="me-news-list">
		<!--全部start-->
		<view  v-if="tabindex=='t1'">
			<view class="orders">
				<view class="state" >
					<view><image src="/static/images/order_status01.png" class="img"></image></view>
					<text>待卖家响应</text>
					<image src="/static/images/g_img23.png" class="ico"></image>
				</view>
				<view class="wait">已等待：<view><bing-countup />:{{time}}</view></view>
				<view class="palce">
					<view>150 ADC<text>购买数量</text></view>
					<view>1030.50 CNY<text>支付金额</text></view>
				</view>
			</view>
			<view class="orders">
				<view class="state" >
					<view><image src="/static/images/order_status03.png" class="img"></image></view>
					<text>等待卖家确认</text>
					<image src="/static/images/g_img23.png" class="ico"></image>
				</view>
				<view class="wait">倒计时：<view><u-count-down :time="9* 60 * 60 * 1000" format="HH:mm:ss:SSS" autoStart millisecond></u-count-down></view></view>
				<view class="palce">
					<view class="on">500 ADC<text>购买数量</text></view>
					<view>3300 CNY<text>支付金额</text></view>
				</view>
			</view>
			<view class="orders">
				<view class="state" >
					<view><image src="/static/images/order_status01.png" class="img"></image></view>
					<text>待卖家响应</text>
					<image src="/static/images/g_img23.png" class="ico"></image>
				</view>
				<view class="wait">已等待：<view><u-count-down :time="7* 60 * 60 * 1000" format="HH:mm:ss:SSS" autoStart millisecond></u-count-down></view></view>
				<view class="palce">
					<view>150 ADC<text>购买数量</text></view>
					<view>1030.50 CNY<text>支付金额</text></view>
				</view>
			</view>
			<view class="orders">
				<view class="state" >
					<view><image src="/static/images/order_status03.png" class="img"></image></view>
					<text>等待卖家确认</text>
					<image src="/static/images/g_img23.png" class="ico"></image>
				</view>
				<view class="wait on">申诉属性：超时未确认</view>
				<view class="palce">
					<view class="on">500 ADC<text>购买数量</text></view>
					<view>3300 CNY<text>支付金额</text></view>
				</view>
			</view>
		</view>
		<!--全部end-->
		<!--待响应start-->
		<view v-else-if="tabindex=='t2'">
			<view class="orders" @click="goto('/pages/transaction/order_detial?status=1')">
				<view class="state" >
					<view><image src="/static/images/order_status01.png" class="img"></image></view>
					<text>待卖家响应</text>
					<image src="/static/images/g_img23.png" class="ico"></image>
				</view>
				<view class="wait">已等待：<view><u-count-down :time="9* 60 * 60 * 1000" format="HH:mm:ss:SSS" autoStart millisecond></u-count-down></view></view>
				<view class="palce">
					<view class="on">500 ADC<text>购买数量</text></view>
					<view>3300 CNY<text>支付金额</text></view>
				</view>
			</view>
		</view>
		<!--待响应end-->
		<!--待付款start-->
		<view v-else-if="tabindex=='t3'" @click="goto('/pages/transaction/order_detial?status=2')">
			<view class="orders">
				<view class="state" >
					<view><image src="/static/images/order_status02.png" class="img"></image></view>
					<text>给卖家付款</text>
					<image src="/static/images/g_img23.png" class="ico"></image>
				</view>
				<view class="wait">倒计时：<view><u-count-down :time="9* 60 * 60 * 1000" format="HH:mm:ss:SSS" autoStart millisecond></u-count-down></view></view>
				<view class="palce">
					<view class="on">500 ADC<text>购买数量</text></view>
					<view>3300 CNY<text>支付金额</text></view>
				</view>
			</view>
		</view>
		<!--待付款end-->
		<!--待确认start-->
		<view v-else-if="tabindex=='t4'">
			<view class="orders" @click="goto('/pages/transaction/order_detial?status=3')">
				<view class="state" >
					<view><image src="/static/images/order_status03.png" class="img"></image></view>
					<text>等待卖家确认</text>
					<image src="/static/images/g_img23.png" class="ico"></image>
				</view>
				<view class="wait">倒计时：<view><u-count-down :time="9* 60 * 60 * 1000" format="HH:mm:ss:SSS" autoStart millisecond></u-count-down></view></view>
				<view class="palce">
					<view class="on">500 ADC<text>购买数量</text></view>
					<view>3300 CNY<text>支付金额</text></view>
				</view>
			</view>
		</view>
		<!--待确认end-->
		<!--已完成start-->
		<view  v-else-if="tabindex=='t5'">
			<view class="orders">
				<view class="state" >
					<view><image src="/static/images/order_status04.png" class="img"></image></view>
					<text>交易完成</text>
					<image src="/static/images/g_img23.png" class="ico"></image>
				</view>
				<view class="wait">ADC已转至您的账户</view>
				<view class="palce">
					<view class="on">500 ADC<text>购买数量</text></view>
					<view>3300 CNY<text>支付金额</text></view>
				</view>
			</view>
		</view>
		<!--已完成end-->
		<!--申诉中start-->
		<view  v-else-if="tabindex=='t6'">
			<view class="orders"  @click="goto('/pages/transaction/order_detial?status=4')">
				<view class="state" >
					<view><image src="/static/images/order_status03.png" class="img"></image></view>
					<text>等待卖家确认</text>
					<image src="/static/images/g_img23.png" class="ico"></image>
				</view>
				<view class="wait on">申诉属性：超时未确认</view>
				<view class="palce">
					<view class="on">500 ADC<text>购买数量</text></view>
					<view>3300 CNY<text>支付金额</text></view>
				</view>
			</view>
		</view>
		<!--申诉中end-->
		<!--交易解除start-->
		<view v-else>
			<view class="orders">
				<view class="state">
					<view><image src="/static/images/order_status05.png" class="img"></image></view>
					<text>交易已解除</text>
					<image src="/static/images/g_img23.png" class="ico"></image>
				</view>
				<view class="wait">解除属性：主动解除</view>
				<view class="palce">
					<view class="on">500 ADC<text>购买数量</text></view>
					<view>3300 CNY<text>支付金额</text></view>
				</view>
			</view>
		</view>
		<!--交易解除end-->
	</view>
</template>

<script>
/**
 * 1、刷新：如果在此页面需要控制刷新当前tab数据则可调用父页面的这个函数：this.$emit('refreshTab');【更多使用方法请移步至源函数查阅】
 * 2、如果需要获取当前tab序号则用：this.tabindex
 * 注：特别注意此页面无生命周期，以及无法使用原生组件，原生组件和fixed元素需要写在mescroll-uni的外面 否则滚动列表会抖动（但使用uView这些组件是没问题的）
 */
export default {
    props:{
        //数据列表
        list: {
            type: Array,
            default(){
                return []
            }
        },
        //当前tab的标识ID
        tabindex: {
            type: [String,Number],
            default: ''
        },
    },
	data(){
		return{
			add_soucang_class:[],
			add_xihuan_class: [],
			time: 0,
		}
	},
	mounted() {
		console.log(this.tabindex)
	},
	created() {
		this.change_time()
	},
	methods:{
		soucang(e){
            if (this.add_soucang_class.indexOf(e) == -1) {
                console.log(e)//打印下标
                this.add_soucang_class.push(e);//选中添加到数组里
            } else {
                this.add_soucang_class.splice(this.add_soucang_class.indexOf(e), 1); //取消
            }
        },
		xihuan(e){
            if (this.add_xihuan_class.indexOf(e) == -1) {
                console.log(e)//打印下标
            this.add_xihuan_class.push(e);//选中添加到数组里
            } else {
                this.add_xihuan_class.splice(this.add_xihuan_class.indexOf(e), 1); //取消
            }
        },
		change_time(){
		    setInterval(()=>{
				this.time+=1
				if(this.time==100){
					this.time=0
				}
		    },10)
		},
	}
}
</script>

<style lang="scss">
.me-news-list{
	padding: 0 25rpx;
	overflow: hidden;
}
.orders{
	margin-top: 60rpx;
}
.state{
	display: flex;
	display: -webkit-flex;
	justify-content: flex-start;
	height: 45rpx;
	align-items: center;
	font-weight:600 ;
	align-items: center;
	padding: 0 12rpx;
	color: #332C2B;
}
.state .img{
	width: 46rpx;
	height: 46rpx;
	display: block;
	margin-right: 13rpx;
}
.state .ico{
	width: 18rpx;
	height: 30rpx;
}
.state text{
	-webkit-flex: 1;
	flex: 1;
	font-size: 37rpx;
	font-weight: 600;
}
.me-news-list .wait{
	display: -webkit-flex;
	display: flex;
	align-items: center;
	padding: 0 12rpx 13rpx;
	font-size: 28rpx;
	line-height: 63rpx;
}
.me-news-list .wait.on{
	color: #E85B3E;
}
.me-news-list .wait > view{
	display: -webkit-flex;
	display: flex;
	align-items: center;
	font-size: 34rpx;
	font-weight:600;
	color: #332C2B;
}
.me-news-list .wait  .u-count-down__text,.me-news-list .wait .uni-countdown{
	font-size: 34rpx;
	font-weight:600;
	color: #332C2B;
}
.me-news-list .wait  .uni-countdown__number,.me-news-list .wait  .uni-countdown__splitor{
	font-size: 34rpx !important;
	color: #332C2B !important;
	font-weight: 600 !important;
	width: auto !important;
	line-height: inherit !important;
}
.me-news-list .palce{
	padding: 45rpx 45rpx 40rpx;
	background-color: #332C2B;
	display: flex;
	display: -webkit-flex;
	flex: 1;
	border-radius: 0 0 20rpx 20rpx;
}

.me-news-list .palce view{
	width: 260rpx;
	font-size: 35rpx;
	color: #17c29d;
}
.me-news-list .palce view:nth-child(2){
	color: #FEFEFE;
}
.me-news-list .palce text{
	display: block;
	font-size: 26rpx;
	color: #B6B6B7;
	line-height: 35rpx;
}
</style>